<template>
  <div class="p-color-bar">
    <div class="u-pure" v-if="type === 'pure'">
      <div v-for="(key, index) in Object.keys(colors)">
        <span class="u-index">{{ index + 1 }}.</span>
        <span class="u-prefix">pureColor.</span>
        <span class="u-label">{{ key }}：</span>
        <span class="u-color">{{ colors[key] }}</span>
        <span class="u-icon" :style="{ backgroundColor: colors[key] }"></span>
      </div>
    </div>
    <div class="u-gradient" v-if="type === 'gradient'">
      <div v-for="(key, index) in Object.keys(colors)">
        <span class="u-index">{{ index + 1 }}.</span>
        <span class="u-prefix">gradientColor.</span>
        <span class="u-label">{{ key }}：</span>
        <span class="u-color">{{ colors[key][0] }}</span>
        <span
          class="u-icon"
          :style="{
            backgroundImage: `linear-gradient(to right, ${colors[key][0]}, ${colors[key][1]})`,
          }"
        ></span>
        <span class="u-color">{{ colors[key][1] }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  type: {
    // 渐变色：gradient   纯色：pure
    type: String,
    default: 'gradient',
  },
  colors: Object,
})
</script>

<style lang="stylus" scoped>
.p-color-bar
  line-height 40px
  color #606266
  .u-index
    margin-right 10px
  .u-prefix
    color #bbb
  .u-label
    display inline-block
    width 100px
  .u-color
    display inline-block
    width 80px
    text-align center
  .u-icon
    display inline-block
    vertical-align middle
    width 150px
    height 30px
</style>
